---
import Layout from '~layouts/VanillaDemo.astro';
import {title} from './_quadtree-playground.json';
---

<Layout title={title}>
  <canvas id="twopoint5d" resize-to="window"></canvas>
</Layout>

<style>
  :global(.lil-gui) :global(option) {
    color: #555;
  }
</style>

<script>
  import {Display, type DisplayEventArgs} from '@spearwolf/twopoint5d';
  import GUI from 'lil-gui';
  import {QuadTreeVisualization} from '~demos/quadtree-playground/QuadTreeVisualization';

  // -----------------------------

  // -----------------------------

  const display = new Display(document.getElementById('twopoint5d')!);

  const visual = new QuadTreeVisualization(display.renderer, 256, 256);

  // visual.canvasStage.on('resize', () => {
  //   visual.render();
  // });

  visual.makeRandomQuadTree();

  display.on({
    resize: ({width, height}: DisplayEventArgs) => {
      visual.canvasStage.setContainerSize(width, height);
    },

    frame: () => {
      visual.canvasStage.render();
    },
  });

  display.start();

  // -----------------------------

  const gui = new GUI({title: 'quadtree playground'});

  const actions = {
    chunkCount: 100,
    maxChunkNodes: 5,

    makeRandomQuadTree: () => {
      visual.makeRandomQuadTree(actions.chunkCount, actions.maxChunkNodes);
    },
  };

  gui.add(actions, 'chunkCount', 1, 1000, 1).name('chunk count');
  gui.add(actions, 'maxChunkNodes', 2, 30, 1).name('max chunk nodes');
  gui.add(actions, 'makeRandomQuadTree').name('make random chunks');
</script>
